import React, { Component } from 'react'
import { Card, List, Avatar, Icon, Spin } from 'antd'
import { antIcon } from '../../loading'
import { getNews } from '../../../requests'
import $ from 'jquery'
import './index.less'
export default class News extends Component {
  constructor() {
    super()
    this.state = {
      //每页显示数量
      perpage: 3,
      //消息列表
      listData: [],
      isLoading: true
    }
    this.data = []
  }
  componentDidMount() {
    getNews().then(resp => {
      console.log(resp.data.data.data)
      const listData = [
        {
          title: '梁晓声签售会',
          adminname: 'admin',
          description:
            '梁晓声将跟沈城的青少年和家长朋友以及文学爱好者谈谈写作方法及技巧',
          avatar: '../../../assets/avatar/admin.jpg',
          content:
            '新华购书中心特邀著名作家、北京首届阅读季读书形象大使、北京语言大学人文学院中文系教师梁晓声开展“文学写作与欣赏”报告会及其作品的签售活动。届时梁晓声将跟沈城的青少年和家长朋友以及文学爱好者谈谈写作方法及技巧。同时为其作品《返城年代：复苏年代中国梦的起航诗篇》签名售书。30年前，梁晓声凭借《这是一片神奇的土地》、《今夜有暴风雪》、《雪城》三部曲享誉文坛，成为知青文学领域最具代表性的作家。时隔30年，梁晓声近日推出了知青文学封笔之作《返城年代》，同名电视剧也即将在央视和多家卫视推出。梁晓声表示，《返城年代》是一部自觉承担文化责任的作品，“也算是给我所有知青作品系列写下一个结局”',
          newsimg:
            'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
          likenum: 133,
          looknum: 144,
          remark: { total: 33 }
        },
        {
          title: '全国主要史学研究与教学机构联席会议首届年会在京举行',
          adminname: 'user',
          description:
            '中国历史研究院主办的“全国主要史学研究与教学机构联席会议首届年会”在北京召开。来自全国32家主要史学研究与教学机构的90余位代表参加会议。',
          avatar: '../../../assets/avatar/admin.jpg',
          content:
            '为贯彻落实习近平总书记致中国历史研究院成立贺信精神，落实中央批准的中国历史研究院组建方案，统筹全国历史学研究资源，整合历史学研究力量，研究规划中国历史学发展方向，加快构建中国特色历史学学科体系、学术体系、话语体系，推动中国历史学繁荣发展，在中央宣传部和中国社会科学院党组领导和指导下，在全国哲学社会科学工作办公室和教育部的大力支持下，中国历史研究院积极打造“全国主要史学研究与教学机构联席会议制度”，在综合考虑学科发展、地区特点、科研与教学机构平衡等因素的基础上，从全国众多史学研究与教育机构中遴选出32家机构作为联席会议成员单位。本次会议是联席会议首届年会，意义非同凡响，讨论的议题关涉中国历史学发展方向。',
          newsimg:
            'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
          likenum: 133,
          looknum: 144,
          remark: { total: 33 }
        }
      ]
      console.log(listData)
      this.setState({
        // listData: resp.data.data.data,
        listData,
        isLoading: false
      })
    })
  }
  iconStatesHandle = () => {
    console.log(this)
  }
  render() {
    return (
      <Card title="最新动态" bordered={false} style={{ width: '100%' }}>
        <Spin indicator={antIcon} spinning={this.state.isLoading}>
          <List
            itemLayout="vertical"
            size="large"
            pagination={{
              onChange: page => {
                console.log(page)
                getNews().then(resp => {
                  console.log(resp)
                })
              },
              pageSize: this.state.perpage
            }}
            dataSource={this.state.listData}
            renderItem={item => (
              <List.Item
                key={item.title}
                extra={
                  <img
                    width={272}
                    alt="logo"
                    // src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                    src={item.newsimg}
                  />
                }
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={<a href={item.href}>{item.adminname}</a>}
                  description={item.description}
                />

                <a href={item.href} style={{ color: '#666' }}>
                  {item.content}
                </a>
                <div className="icon-wrapp">
                  <span>
                    <Icon type="eye" onClick={this.iconStatesHandle} />
                    <span>{item.looknum}</span>
                  </span>
                  <span>
                    <Icon type="like-o" />
                    <span>{item.likenum}</span>
                  </span>
                  <span>
                    <Icon type="message" />
                    <span>{item.remark.total}</span>
                  </span>
                </div>
              </List.Item>
            )}
          />
        </Spin>
      </Card>
    )
  }
}
